<template>
    <article class="render-number">
        <el-tooltip :disabled="!renderColumnNum(props.num).unit" effect="dark" placement="top-start">
            <template #content>
                <span>{{ Number(props.num)?.toLocaleString() }}</span>
            </template>
            <div :class="{ number: renderColumnNum(props.num).unit, 'zw-text-ellipsis': true }">
                {{ unit === '%' ? num : renderColumnNum(props.num).num }}
            </div>
        </el-tooltip>
        <span class="column-card-units"> {{ renderColumnNum(props.num).unit }}{{ props.unit }} </span>
    </article>
</template>

<script setup lang="ts">
import { renderColumnNum } from './colunm-number-utils';

const props = withDefaults(
    defineProps<{
        num: number | string;
        unit: string;
    }>(),
    {
        num: 0,
        unit: ''
    }
);
</script>
<style lang="scss" scoped>
.column-card-units {
    flex: 0 0 28px;
    margin-left: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #33302d;
    line-height: 20px;
}

.render-number {
    display: flex;
    align-items: flex-end;
}
</style>
